<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="background:#868686;height:385.7px;width:675px;">
                <!-- 主页图片分辨率675X385.7 上传时用PS修改分辨率 右侧放置基本信息 -->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active" style="height:385.7px;width:675px;">
                          <img src="./img/widget-banner01.png"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item" style="height:385.7px;width:675px;">
                          <img src="./img/widget-banner02.png"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item" style="height:385.7px;width:675px;">
                          <img src="./img/widget-banner01.png"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                      </div>
                    </div>
<div id="app">
    {{ mobile }}
    <button @click="save_username">提交</button>
    <div>
        <input type="text" ><br>
        <button @click="send_email">验证邮箱</button>
    </div>
</div>
<script src="./js/vue-2.5.16.js"></script>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/axios-0.18.0.min.js"></script>
<script src="./js/base.js"></script>
<script src="./js/layer/layer.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        host: HOST,
        user_id: localStorage.user_id || sessionStorage.user_id,
        token: localStorage.token || sessionStorage.token,
        username: '',
        mobile: '',
        real_name: '',
        email: '',
        avatar_url: '',
        personal_url: '',
        email_active: false,

        // 编辑状态
        username_edit: false,
        personal_url_edit: false,
        email_edit: false,
        mobile_edit: false,
        password_edit: false,

        set_email: false,
        send_email_btn_disabled: false,
        send_email_tip: '重新发送验证邮件',
        email_error: false,
        histories: []
    },
    mounted: function(){
        // 判断用户的登录状态
        if (this.user_id && this.token) {
            axios.get(this.host + '/user/', {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
                .then(response => {
                    // 加载用户数据
                    this.user_id = response.data.id;
                    this.username = response.data.username;
                    this.real_name = response.data.real_name;
                    this.mobile = response.data.mobile;
                    this.email = response.data.email;
                    this.email_active = response.data.email_active;
                    this.avatar_url = response.data.avatar_url;
                })
                .catch(error => {
                    if (error.response.status==401 || error.response.status==403) {
                        location.href = '/person-loginsign.html?next=/person-account.html'
                    }
                });
        } else {
            location.href = '/person-loginsign.html?next=/person-account.html'
        }
    },
    methods: {
        // 退出
        logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        // 保存用户名
        save_username: function(){
            axios.put(this.host + '/put_username/9/', {
                        "email": "543443183XS@qq.com"
                    }, {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
        },
        // 保存email
        save_email: function(){

        },

    }
});
</script>
</body>
</html>